<template>
  <div>
    <div class="list-area">
      <div class="setting-area glo-content-area">
        <div class="title">{{$t('UlogI18n.UlogI18nTit')}}</div>
      </div>

      <div class="glo-search-area">

        <div class="date-filter widget-item">
          <div class="widget-label">{{$t('BodyTemperatureIndex.BodyTemAnimalTimeS')}}</div>
          <DatePicker
            class="date-widget"
            v-model="selectDate"
            type="daterange"
            :editable='false'
            :placeholder="$t('UlogI18n.UlogI18nTimeScope')"
          />
        </div>
        <div class="widget-item">
          <div class="widget-label">{{$t('UlogI18n.UlogI18nType')}}</div>
          <Select
            v-model="personType"
            style="width:200px"
            clearable
          >
            <Option
              v-for="(item, idx) in personTypes" :key="idx"
              :value="item.value"
              :label="item.name"
            ></Option>
          </Select>
        </div>

        <div class="widget-item glo-clear-after">
          <div class="widget-label">{{$t('UlogI18n.UlogI18nAdmin')}}</div>
          <Input
            v-model="personAccount"
            :placeholder="$t('staffIndex.staffDepartCrewSearch')"
            search
            :enter-button="$t('devicesIndex.devNumberBtn')"
            @on-search="$_page_update"
          />
        </div>

        <div class="widget-item glo-clear-after">
          <i-button style="margin-top: 36px;"  type="primary" @click="downloadClick" v-if="allPermissions.staffFailureLog">{{$t('staffIndex.staffFailureLog')}}</i-button>
        </div>
      </div>

      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
        @on-selection-change="handleSelection"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="$_page_pageChange"
        @on-page-size-change="$_page_pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import {
  mapState,
} from 'vuex'
import {
  getSysLog,
  exportSysLog,
} from '@/api/record.js'
import {
  getExcel,
} from '@/api/public.js'
import {
  format
} from '@/utils/auth.js'
import pageMixin from '@/utils/mixins/pageMixin.js'

// import ListSettings from './ListSettings'

export default {
  mixins: [
    pageMixin,
  ],

  data () {
    return {
      personName: '',
      sn: '',
      areaName: '',
      selectDate: ["",""],
      personType: ' ',
      personTypes: [
        { name: this.$t('navigationLeft.newDevices'), value: 'Site Management' },
        { name: this.$t('navigationLeft.equipment'), value: 'Device' },
        { name: this.$t('navigationLeft.staff'), value: 'Personnel' },
        { name: this.$t('Attendance.AttendanceManage'), value: 'Attendance Management' },
        { name: this.$t('navigationLeft.visitors'), value: 'Visitor Managerment' },
        { name: this.$t('navigationLeft.permissions'), value: 'Permissions' },
        // { name: this.$t('navigationLeft.bodyTemperature'), value: '测温记录' },
        // { name: this.$t('navigationLeft.accessRecord'), value: '访问记录' },
        // { name: this.$t('navigationLeft.TerminalVersion'), value: '终端版本号管理' },
      ],
      personAccount: '',
      // personAccounts: [
      //   { name: '超级管理员', value: '1' },
      // ],
      selection: [],
      list: [],
      columns: [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('UlogI18n.UlogI18nType'),
          key: 'type',
        },
        {
          title: this.$t('UlogI18n.UlogI18nDetails'),
          key: 'text',
          render: (h, { row }) => {
            let label = '-'
            if (row.text) {
              label = row.text
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('UlogI18n.UlogI18nAdmin'),
          key: 'userName',
          render: (h, { row }) => {
            let label = '-'
            if (row.userName) {
              label = row.userName
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('UlogI18n.UlogI18nTime'),
          key: 'createTime',
          sortable: true,
        },
        {
          title: this.$t('loginIndex.loginIpAddress'),
          key: 'ip',
          render: (h, { row }) => {
            let label = '-'
            if (row.ip) {
              label = row.ip
            }
            return h('div', label)
          },
        },
      ],

      ifCreate: false,
      ifUpdate: false,
      editItem: null,
      ifSelectArea: false,
      areaSelectCallback: null,
      allPermissions:{
        BodyTemAnimalRecord:false,
      },
    }
  },
  computed: {
    ...mapState([
      'departId',
    ]),
    
    btnShow () {
      return this.$store.state.btnShow
    },
  },
  watch: {
    personType: '$_page_update',
    selectDate: '$_page_update',
    btnShow () {
      
      this.personTypes = [
        { name: this.$t('navigationLeft.newDevices'), value: 'Site Management' },
        { name: this.$t('navigationLeft.equipment'), value: 'Device' },
        { name: this.$t('navigationLeft.staff'), value: 'Personnel' },       
        { name: this.$t('Attendance.AttendanceManage'), value: 'Attendance Management' },
        { name: this.$t('navigationLeft.visitors'), value: 'Visitor Management' },
        { name: this.$t('navigationLeft.permissions'), value: 'Permissions' },
        // { name: this.$t('navigationLeft.bodyTemperature'), value: '测温记录' },
        // { name: this.$t('navigationLeft.accessRecord'), value: '访问记录' },
        // { name: this.$t('navigationLeft.TerminalVersion'), value: '终端版本号管理' },
      ]

      this.columns = [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('UlogI18n.UlogI18nType'),
          key: 'type',
        },
        {
          title: this.$t('UlogI18n.UlogI18nDetails'),
          key: 'text',
          render: (h, { row }) => {
            let label = '-'
            if (row.text) {
              label = row.text
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('UlogI18n.UlogI18nAdmin'),
          key: 'userName',
          render: (h, { row }) => {
            let label = '-'
            if (row.userName) {
              label = row.userName
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('UlogI18n.UlogI18nTime'),
          key: 'createTime',
        },
        {
          title: this.$t('loginIndex.loginIpAddress'),
          key: 'ip',
          render: (h, { row }) => {
            let label = '-'
            if (row.ip) {
              label = row.ip
            }
            return h('div', label)
          },
        },
      ];

      return this.$store.state.btnShow
    }
  },

  mounted () {
    this.$_page_update()
    this.getAllPermissions()
  },

  methods: {
    getAllPermissions(){
      let da=JSON.parse(window.localStorage.getItem('logo'))||[]
      da.map(v => {
        if(v.permission=='#uLog'&&v.children){
          v.children.map(a=>{
            if(a.permission=='#staffFailureLog2'&&a.checked==='true'){
              this.allPermissions.staffFailureLog=true
            }
          })
        }
      });
    },
    handleSelection (selection = []) {
      this.selection = selection
    },
    handleSelectionAllStatus (status) {
      this.$refs.table.selectAll(status)
    },

    handleSettingsClick (name, row) {
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
      }
    },
    async downloadClick () {
      this.getExportList()
    },
    // async downloadClick () {
    //   this.getExportList()
    // },
    async getExportList (query) {


      let aTime = ''
      let oTime = ''
      if (this.selectDate[0]) {
        aTime = format(this.selectDate[0], 'yyyy-MM-dd HH:mm')
        oTime = format(this.selectDate[1], 'yyyy-MM-dd HH:mm')
      } else {
        // console.log('lalallala')
      }
      let language = localStorage.getItem('language') || 'zh'
      switch (language) {
        case 'zh':
          language = 1
          break
        case 'zf':
          language = 2
          break
        case 'en':
          language = 3
          break
        case 'ja':
          language = 4
          break
        case 'ko':
          language = 5
          break
      }


      const { success, data } = await exportSysLog({
        userName: this.personAccount,
        text: this.personType,
        startDate: aTime,
        endDate: oTime,
        language: language,
      })
      if (success) {
        if (data.code == 0) {
          window.open(getExcel(data.msg))
        }else{
          this.$Message.error(this.$t('BodyTemperatureIndex.BodyTemAnimalRecordErr'))
        }
      }
    },

    async getData (query) {
      // console.log(this.selectDate)
      let aTime = ''
      let oTime = ''
      if (this.selectDate[0]) {
        aTime = format(this.selectDate[0], 'yyyy-MM-dd HH:mm')
        oTime = format(this.selectDate[1], 'yyyy-MM-dd HH:mm')
      } else {
        // console.log('lalallala')
      }
      const { success, data } = await getSysLog({
        page: query.page,
        limit: query.pageSize,
        id: '',
        userName: this.personAccount,
        type: '',
        text: this.personType,
        startDate: aTime,
        endDate: oTime,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        list = data.data
        page = data.pageNum || 1
        total = Number(data.count)
      }
      this.list = list
      this.page = page
      this.pageSize = query.pageSize
      this.total = total
      this.selection = []
    },
  },
}
</script>

<style lang="less" scoped>
.list-area {
  overflow: hidden;

  /deep/ .img-area {
    width: 100px;
    height: 100px;
    margin: 6px 0;
    box-sizing: content-box;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
.glo-search-area {
  .date-filter {
    .date-widget {
      width: 210px;
    }
  }
}
</style>
